import { defineComponent, ref, watch} from 'vue'
import * as echarts from 'echarts'

// 声明类型
const PropsType = {
  cdata: {
    type: Object,
    require: true
  }
} as const

// 定义主体
export default defineComponent({
  props: PropsType,
  setup(props) {
    // 定义 ref
    const chartRef = ref()

    // 配置项
    let options = {}

    watch(
      () => props.cdata,
      (val: any) => {
        options = {
            color: [ '#64D3FF','#FB8736'],
            tooltip: {
              trigger: 'axis',
              axisPointer: {
                // 坐标轴指示器，坐标轴触发有效
                type: 'line', // 默认为直线，可选为：'line' | 'shadow'
              },
              formatter: function (params) {
                let str = params[0].name + "<br />";
                params.forEach((item) => {
                  if (item.seriesName == '男生') {
                    
                    str +=
                      '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:#64D3FF;"></span>' + item.seriesName + " : " + item.value + "<br />";
                  }
                 
                  else {
                    const a = '<span style="display:inline-block;margin-right:5px;border-radius:50%;width:10px;height:10px;left:5px;background-color:#FB8736;"></span>' + item.seriesName + " : " + item.value * (-1) + "<br />"
                    const b = '';
                    const c = item.value ? a : b
                    str += c;
                  }
                });
                return str;
              },
            },
            legend: [
              {
                itemWidth: 14,
                itemHeight: 14,
                icon: 'rect',
                right: '5%',
                top: '4%',
                itemGap: 20, //每条图例的距离
                data: [
                  {
                    name: val.legendName[0],
                    textStyle: {
                      color: '#5EAAF7',
                      fontSize: 14
                    },
                  },
                  {
                    name: val.legendName[1],
                    textStyle: {
                      color: '#FE9F5C',
                      fontSize: 14
                    },
                  },
                ],
              },
            ],
            xAxis: {
              // name: 'X Axis',
              silent: false,
              axisLine: {
                show: true,
                lineStyle: {
                  //坐标轴线设置
                  color: '#444A62',
                },
              },
              splitLine: { show: false },
              splitArea: { show: false },
              axisTick: {
                //刻度
                show: false,
              },
              axisLabel: {
                interval: 0,
                //x轴数据
                textStyle: {
                  //x轴数据字体设置
                  color: '#A7E4FD',
                  fontSize: val.fontSize,
                },
                formatter: function (value) {let ret = ''; //拼接加\n返回的类目项
                  const maxLength = 4; //每项显示文字个数
                  const valLength = value.length; //X轴类目项的文字个数
                  const rowN = Math.ceil(valLength / maxLength); //类目项需要换行的行数
                  if (rowN > 1) {
                    //如果类目项的文字大于3,
                    for (let i = 0; i < rowN; i++) {
                      let temp = ''; //每次截取的字符串
                      const start = i * maxLength; //开始截取的位置
                      const end = start + maxLength; //结束截取的位置
                      //这里也可以加一个是否是最后一行的判断，但是不加也没有影响，那就不加吧
                      temp = value.substring(start, end) + '\n';
                      ret += temp; //凭借最终的字符串
                    }
                    return ret;
                  } else {
                    return value;
                  }
                },
              },
              data: val.xData,
            },
            yAxis: [
              {
                // inverse: true,
                splitArea: { show: false }, //背景区域
                splitLine: {
                  show: false,
                },
                type: 'value',
                axisLabel: {
                  //Y轴数据
                  formatter: function (value) {
                    return Math.abs(value); //负数取绝对值变正数
                  },
                  textStyle: {
                    //Y轴数据字体设置
                    color: '#A7E4FD',
                    fontSize: 16,
                  },
                },
                axisTick: {
                  //刻度
                  show: false,
                },
                axisLine: {
                  //坐标轴
                  show: true,
                  lineStyle: {
                    //坐标轴线设置
                    width: 1,
                    color: '#444A62',
                  },
                },
              },
            ],
            grid: {
              left: val.left, //整体偏移
              right: '5%', //整体偏移
              bottom: '8%',
              top: '13%'
            },
            series: [
              {
                name: val.legendName[0], //上面黄色的
                yAxisIndex: 0,
                type: 'bar',
                barWidth: val.barWidth,
                stack: 'one',
                itemStyle: {
                  normal: {
                    color: function (params) {
                      return new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
      
                          {
                            offset: 0,
                            color: '#4974F1', // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: '#2BF3F5', // 100% 处的颜色
                          },
                        ],
                        false
                      );
                    },
                    barBorderRadius: val.barBorderRadius,
                  },
                },
                data: val.yData2,
              },
              {
                name: val.legendName[1], //下面蓝的
                type: 'bar',
                barWidth: val.barWidth,
                stack: 'one',
                yAxisIndex: 0,
                itemStyle: {
                  normal: {
                    color: function (params) {
                      return new echarts.graphic.LinearGradient(
                        0,
                        0,
                        0,
                        1,
                        [
                          {
                            offset: 0,
                            color: '#FB8533', // 0% 处的颜色
                          },
                          {
                            offset: 1,
                            color: '#FFA96D', // 100% 处的颜色
                          },
                        ],
                        false
                      );
                    },
                    barBorderRadius: val.barBorderRadius,
                  },
                },
                data: val.yData1,
              },
              
            ],
          }
        // 手动触发更新
        if (chartRef.value) {
          // 通过初始化参数打入数据
          chartRef.value.initChart(options)
        }
      },
      {
        immediate: true,
        deep: true
      }
    )

    return () => {
      const height = "500px"
      const width = "580px"

      return <div>
        <echart ref={chartRef} options={options} height={height} width={width} />
      </div>
    }
  }
})

